import { IconCommon, IconArchive, IconDashboard } from "@arco-design/web-react/icon";

import CuPage from "./home/page";
import PageConfig from "./home/page/config";

// base
import CuText from "./base/text";
import CuTextConfig from "./base/text/config";

import CuPicture from "./base/picture";
import CuPictureConfig from "./base/picture/config";

const addComponent = (props, component) => {
	// 此处需要将当前组件信息添加到左侧数据中
	const { panel, property } = props;
	const type = panel.type;

	Object.assign(global.GEditorData.config, {
		[type]: {
			panel,
			property,
			component
		}
	});
};

export const initComponent = () => {
	// 辅助组件
	addComponent(PageConfig, config => <CuPage config={config}></CuPage>);

	// 基础组件
	addComponent(CuTextConfig, config => <CuText config={config}></CuText>);
	addComponent(CuPictureConfig, config => <CuPicture config={config}></CuPicture>);
};

export const regCustomComponent = data => {
	if (!data) {
		return;
	}

	const { props, component } = data;
	addComponent(props, component);
};

export const PanelDataConfig = [
	{
		type: "base",
		label: "基础",
		icon: <IconCommon />,
		body: []
	},
	{
		type: "template",
		label: "模板",
		icon: <IconCommon />,
		body: []
	},
	{
		type: "background",
		label: "背景",
		icon: <IconDashboard />,
		body: []
	},
	{
		type: "decorate",
		label: "装饰",
		icon: <IconDashboard />,
		body: []
	},
	{
		type: "chart",
		label: "图表",
		icon: <IconArchive />,
		body: []
	}
];
